<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./myCssReset.css">
    <style>
        .all{width: 100%;}
        .nav{
            width: 100%;
            color: #FFFFFF;
            background-color:#333 ;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            position: fixed;
            top: 0;
        }
        .nav .col1{
            width: 297px;
            height: 40px;
            line-height: 40px;
        }
        .nav .col2{
            width: 222px;
            height: 40px;
            vertical-align: middle;
        }
        .nav .col1>a{
            margin-right: 25px;
            color: white;
            text-align: right;
        }
        .nav .col2>a{
            margin-left: 25px;
            color: white;
            line-height: 40px;
        }
        .nav .col2>a>img{                      
            width: 24px;
            height: 22px;
            /* margin-top: 8px; */
        }
        .navbar{
            width: 1240px;
            height: 102px;
            margin-top: 40px;
            padding: 33px 0;
            position: relative;
        }
        .navbar .col1{
            width: 100%;
            display: flex;
            height: 36px;
        }
        .navbar .col1 img{
            width: 180px;
            height: 36px;
        }
        .navbar .col1 >.item1{
            width: 500px;
            margin-left: 50px;
            line-height: 36px;
            /* background-color: red; */
        }
        .navbar .col1 >.item1 a{
            color: #333333;
            font-size: 18px;
            margin-right: 50px;
        }
        .navbar .col1 >.item2{
            width: 420px;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 18px;
            border: 1px solid #ccc;
            padding: 5px  30px;
            box-sizing: border-box;
            display: flex;
            position: relative;
            left:140px;
            /* background-color: yellow; */
        }
        .navbar .col1 >.item2 input{
            width: 340px;
            height: 24px;
            border: 0;
            
        }
        .navbar .col1 >.item2 img{
            width: 24px;
            height: 24px;
        }
        .navbar .col1 >.item2 button{
            border: 0;
            background-color: #ffffff;
        }
        .navbar .col2{
            position: absolute;
            right: 0;
        }
        .navbar .col2 a{
            color: #666666;
            margin: 5px 5px 0 0;
        }
        hr{width: 1200px;}
    </style>
</head>

<body>
<div class="all">
    <!-- 深色导航 -->
    <div class="nav">
        <div class="col1">
            <a href="#">帮助中心</a>
            <a href="#">收藏</a>
            <a href="#">360官网</a>
            <a href="#">360智慧生活</a>
        </div>
        <div class="col2">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#"><img src="../img/商城1_看图王.png" alt=""></a>
        </div>
    </div>
    <!-- 导航条 -->
    <div class="navbar">
        <div class="col1">
            <img src="../img/logo.png" alt="">
            <div class="item1">
                <a href="#">新品推荐</a>
                <a href="#">热卖榜单</a>
            </div>
            <div class="item2">
                <input type="text">
                <button><img src="../img/搜索_看图王.png" alt=""></button>
            </div>
        </div>
        <div class="col2">
            <a href="#">记录仪</a>
            <a href="#">摄像机</a>
            <a href="#">路由器</a>
            <a href="#">耳机</a>
            <a href="#">扫地机</a>
            <a href="#">智能手表</a>
        </div>
    </div>
    <hr>
</div>
</body>

</html>